<template>
  <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    <button type="button" @click="_login">TEST</button>
    <div>
      <select class="select" @change="changeSelect" v-model="selected">
        <option :key="item.value" v-for="item in tdUser" :value="item">{{item.name}}</option>
      </select>
    </div>
    <div class="d1">
      <div>name:<input type="text" v-model="name"></div>
      <div>password:<input type="text" v-model="password"></div>
      <div>userType:<input type="text" v-model="userType"></div>
    </div>
  </div>
</template>

<script>
import {login} from '../../api/tdo'
import {userArr} from '../../api/data/tdoData'
import TdoUser from 'src/common/js/tdoUser'

export default {
  data () {
    return {
      message: 'Copy These Text',
      tdUser: [],
      selected: {},
      name: '',
      password: '',
      userType: ''
    }
  },
  mounted () {
    setTimeout(() => {
      this._initUser()
    }, 20)
  },
  methods: {
    // dataProcessing (val) {
    //   this.message = this.message + ' ' + val
    // },
    changeSelect () {
      this.name = this.selected.name
      this.password = this.selected.password
      this.userType = this.selected.userType
      console.log(this.selected)
    },
    _initUser () {
      console.log(userArr)
      let tdoUserArr = []
      userArr.forEach((item) => {
        let tdoUser = new TdoUser({
          name: item.name,
          password: item.password,
          userType: item.userType
        })
        tdoUserArr.push(tdoUser)
      })
      console.log(tdoUserArr)
      this.tdUser = tdoUserArr
    },
    _login () {
      let data = {
        'name': this.name,
        'password': this.password,
        'userType': this.userType
      }
      login(data).then((res) => {
        console.log(res)
        this.message = res.result
      })
    },
    doCopy: function (val) {
      // this.dataProcessing(val)
      this.$copyText(this.message).then(function (e) { // 这里用了vue-clipboard2的方法$copyText
        console.log('copy success')
      }, function (e) {
        alert('copy fail')
        console.log(e)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .d1
    margin-top: 20px
  .select
    margin-top 20px
</style>
